<template>
	<view>
		<view v-if="flag==true">
			<view class="logo">
				<image class="img" src="../../static/logo/logo.png" mode="widthFix"></image>
			</view>
			<view class="name">找回密码</view>
			<view class="input">
				<input type="number" placeholder="请输入账号" name="mobile" v-model="mobile" />
			</view>
			<view class="input pwd">
				<input type="number" placeholder="请输入验证码" v-model="ma"/>
				<view class="gain_code" @click="getCode">{{code}}</view>
			</view>
			<view class="input pwd">
				<input type="password"  placeholder="请输入密码" v-model="password" />
			</view>
			<view class="login" @click="plogin">确定</view>
		</view>
	</view>
</template>

<script>
	import {mligin,ylogin,getsms,findpad} from "../../api/login.js"
	export default {
		data() {
			return {
				mobile:"",
				password:"",
				flag:true,
				code:"获取验证码",
				show:true,
				back:null,
				ma:"",
			}
		},
		onLoad(e) {
		},
		methods: {
			msgLogin(){
				this.flag=false;
			},
			pwdLogin(){
				this.flag=true;
			},
			async plogin(){
				if(this.password.trim()!=''&&this.ma.trim()!=''&&this.mobile.trim()!=''){
					let res=await this.post(findpad,{phone:this.mobile,smsVerifyCode:this.ma,password:this.password})
					this.msg("找回成功")
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				}else{
					this.msg("信息填写不完整","none")
				}
			},
			//点击获取验证码
			async getCode(){
				if(this.code=="获取验证码"){
					if(this.$u.test.mobile(this.mobile)){
						let res=await this.get(getsms,{mobile:this.mobile})
						this.msg("验证码发送成功")
						if(this.code=="获取验证码"){
							let time = 59;
							let timer = setInterval(() => {
								if (time === 0) {
									clearInterval(timer);
									this.code="获取验证码"
								} else {
									this.code = time+"s后获取";
									time--
								}
							}, 1000);
						}
					}else{
						this.msg("手机号未填写或格式不对","none")
					}
				}else{
					this.msg("稍后重试","none")
				}
			},
		},
	}
</script>

<style scoped>
	.logo {
		width: 116rpx;
		margin: 32rpx auto 80rpx;
	}

	.img {
		width: 116rpx;
		height: 116rpx;
	}

	.name {
		width: 350rpx;
		height: 70rpx;
		font-size: 50rpx;
		font-weight: bold;
		line-height: 70rpx;
		color: #333333;
		margin-left: 66rpx;
	}

	.input {
		width: 610rpx;
		margin-left: 66rpx;
		border-bottom: 1px solid #F0812D;
		margin-top: 66rpx;
		padding-bottom: 15rpx;
	}

	.clear {
		width: 20rpx;
	}

	.pwd {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.show {
		width: 25rpx;
	}

	.liner {
		width: 1px;
		height: 15rpx;
	}

	.forget {
		font-size: 24rpx;
		font-weight: 300;
		color: #666666;
	}

	.login {
		margin: 80rpx auto;
		width: 610rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #F3C44E 0%, #F18D29 53%, #ED6138 100%);
		border-radius: 62rpx;
		font-size: 32rpx;
		font-weight: 300;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.login_style {
		margin: 40rpx auto;
		width: 610rpx;
		height: 30rpx;
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: 300;
		color: #333333;
	}
	.gain_code{
		width: 190rpx;
		height: 70rpx;
		background-image: url(../../static/logo/gain_bg.png);
		background-repeat: no-repeat;
		background-size: 190rpx 70rpx;
		text-align: center;
		line-height: 70rpx;
		font-size: 24rpx;
		color: #F0812D;
	}
</style>
